<h1>Hutang</h1>
<div style="width: 100%;background: white;border-radius:5px;height: 300px;" id="grafik">

</div>
<div style="width: 100%;height: 150px;background: white;overflow: scroll;margin-top: 20px;color: black;">
    <table width="100%" class="style">
        <th>ID Trx From</th>
        <th>Supplier</th>
        <th>Saldo</th>
        <th>Tgl. Jatuh Tempo</th>
        <th>Nama Akun</th>
        <?php
        foreach ($grid as $row) {
            ?>
            <tr>
                <td><?= $row->idtrxfrom; ?></td>
                <td><?= $row->namasupplier; ?></td>
                <td><?= rupiah(round($row->saldo)); ?></td>
                <td><?= date('d-F-Y', strtotime($row->tgljttempo)); ?></td>
                <td><?= $row->namaakun; ?></td>
            </tr>
            <?php
        }
        ?>
    </table>
</div>
<script type="text/javascript">
    var chart = null,options=null;
    $(document).ready(function(){
        options ={
            chart: {
                renderTo: 'grafik',
                type: 'column'
            },
            title: {
                text: 'Grafik Hutang '
            },
            subtitle: {
                text: '<?= $name; ?>'
            },
            xAxis: {
                categories: [<?= $supplier; ?>],
                labels: {
                    rotation: -30,
                    align: 'right',
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Jatuh Tempo'
                }
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.x +': '+ this.y ;
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    colorByPoint :true
                }
            },
            series: [{
                    name: 'Limit',
                    data: [<?= $limit; ?>]
    
                }]
        }
        chart = new Highcharts.Chart(options);
    });
</script>